<template>
  <Toggle :status="defaultTheme" @changeStatus="handleChange">
    <template v-if="theme === 'dark-theme'">
      <svg-icon icon-class="sun" :style="toggleIcon" />
    </template>
    <template v-else>
      <svg-icon icon-class="moon" :style="toggleIcon" />
    </template>
  </Toggle>
</template>


<script lang="ts">

import { defineComponent, reactive, computed } from 'vue'
import Toggle from '@/components/ToggleSwitch/Toggle.vue'
import { useAppStore } from '@/store/app'
import SvgIcon from '@/components/SvgIcon/index.vue'

export default defineComponent({
  name: 'ThemeToggle',
  components: {
    // SvgIcon,
    Toggle
  },
  setup() {
    const appStore = useAppStore()
    let defaultTheme = appStore.themeConfig.theme === 'dark-theme' ? true: false
    const SvgStyle = reactive({
      fill: 'yellow',
      margin: '5.5px 3px 2px 5.5px'
    })
    const handleChange = (status: boolean) => {

      appStore.toggleTheme(status)
    }
    return {
      theme:computed(() => appStore.themeConfig.theme),
      handleChange,
      toggleIcon: computed(() => SvgStyle ),
      defaultTheme
    }
  }
})
</script>

<style scoped>

</style>